<!--
 * @Description: 
 * @Author: zzj
 * @Date: 2021-10-20 14:08:42
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-20 14:34:07
-->
<template>
  <div class="article_list">
    <div>
      <button @click="toPublishHandler">添加</button>
    </div>
    <ul v-if="articles && articles.list.length > 0">
      <li v-for="item in articles.list" :key="item.id" style="cursor: pointer">
        <span @click="toDetailsHandler(item.id)">{{ item.title }} </span>
        &nbsp;
        <a href="" @click.prevent="delHandler(item)">删除</a>
      </li>
    </ul>
    <div v-else>数据不存在</div>
  </div>
</template>
<script>
import {ref,onMounted} from 'vue'
import {get} from '../../../utils/request'
export default {
  methods: {
    toDetailsHandler(id) {
      this.$router.push({
        path: "/home/article/details",
        query: { id },
      });
    },
    toPublishHandler() {
      this.$router.push("/home/article/publish");
    },
  },
  setup(props) {
    // 初始化 资讯管理 - 资讯初始化
    // 1. 数据
    let articles = ref({ list: [] });
    // 2. 初始化查询
    let loadArticles = async function () {
      let url = "/article/pageQuery";
      let params = {
        page: 1,
        pageSize: 10,
      };
      let resp = await get(url,params);
      articles.value = resp.data;
    };
    // 3. 将初始化查询注册到mounted中，等到生命进行到mounted再执行
    onMounted(loadArticles);

    return {
      articles,
      loadArticles,
    };
  },
};
</script>
<style scoped>
</style>
